<template>
  <div class="header">
    <div class="align-items_center p_lg">
      <div>
        <u--image
          :src="user.avatar"
          shape="circle"
          width="4rem"
          height="4rem"

        ></u--image>
      </div>
      <div class="flex px_sm">
        <p class="username">张三</p>
        <!-- <p class="phone">18200001111</p> -->
      </div>
      <!-- <div>
	        <u-icon name="phone-o" size="2rem" />
	      </div> -->
    </div>
  </div>
</template>

<script>
import { navigate } from '../../service/navigate';
export default {
  name: 'Header',
  data() {
    return {
      user: {},
    };
  },
  methods: {
    navigate,
    loginAction() {
      uni.login({
        provider: 'weixin',
        success({ code }) {
          console.log('code', code);
          uni.getUserInfo({
            provider: 'weixin',
            success({ userInfo }) {
              user.value = userInfo;
              // login({
              //   code,
              //   ...infoRes.userInfo,
              // })
            },
          });
        },
      });
    },
  },
  mounted() {
    this.loginAction();
  },
};
</script>

<style lang="scss" scoped>
@import '../../static/variables.scss';

.header {
  background: url('@/static/header_bg.png') center top/cover no-repeat;
  // height: 160px;
  // background-color: #00CBCA; /* 不支持线性的时候显示 */
  // background-image: linear-gradient(to bottom right, #00CBCA, #D9BE32);
  .username {
    font-size: map-get($font-sizes, md);
    font-weight: bold;
    line-height: 1.6;
  }
  .phone {
    font-size: map-get($font-sizes, default);
    line-height: 1.6;
  }
}
</style>
